import { useRouter } from 'expo-router';
import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';

export default function AccountScreen() {
  const router = useRouter();
  return (
    <ScrollView style={styles.container}>
      {/* 自定義 Header */}
      <View style={styles.customHeader}>
        <TouchableOpacity onPress={() => router.back()}>
          <Text style={styles.backText}>←</Text>
        </TouchableOpacity>
        <View style={styles.headerCenter}>
          <Image source={require('../../assets/logo.png')} style={styles.headerAvatar} />
          <Text style={styles.headerName}>Kana Yuuki</Text>
        </View>
        <View style={{ width: 24 }} />
      </View>

      <View style={styles.profileRow}>
        <Image source={require('../../assets/logo.png')} style={styles.avatar} />
        <View>
          <Text style={styles.name}>Kana Yuuki</Text>
          <Text style={styles.email}>kana.y@example.com</Text>
        </View>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>我的帳戶</Text>
        <TouchableOpacity style={styles.item} onPress={() => router.push('/account/subscription')}>
          <Text style={styles.itemText}>訂閱方案</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.item} onPress={() => router.push('/account/bookings')}>
          <Text style={styles.itemText}>預約紀錄</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.item} onPress={() => router.push('/account/orders')}>
          <Text style={styles.itemText}>購買紀錄</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>設定</Text>
        <TouchableOpacity style={styles.item} onPress={() => router.push('/account/language')}>
          <Text style={styles.itemText}>語言 / Language</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.item} onPress={() => router.push('/account/notifications')}>
          <Text style={styles.itemText}>通知設定</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => router.push('/')} style={styles.item}>
          <Text style={styles.itemText}>登出</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 60,
    paddingHorizontal: 20,
  },
  customHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 20,
  },
  backText: {
    fontSize: 20,
    color: '#555',
  },
  headerCenter: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  headerAvatar: {
    width: 32,
    height: 32,
    borderRadius: 16,
  },
  headerName: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111',
  },
  profileRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 30,
  },
  avatar: {
    width: 64,
    height: 64,
    borderRadius: 32,
    marginRight: 16,
  },
  name: {
    color: '#111',
    fontSize: 18,
    fontWeight: '600',
  },
  email: {
    color: '#888',
    fontSize: 13,
  },
  section: {
    marginBottom: 30,
  },
  sectionTitle: {
    color: '#999',
    fontSize: 14,
    marginBottom: 12,
  },
  item: {
    paddingVertical: 12,
    borderBottomColor: '#eee',
    borderBottomWidth: 1,
  },
  itemText: {
    color: '#111',
    fontSize: 15,
  },
});
